<!--公共头部-->
<template>
  <div class="headerContianer">
 
    <div class="headercon">
      <div class="commonHeardercontainer">
        <p class="currentTime">{{currentTime}}</p>
        <p>
          <span>欢迎您 小测测测</span>
          <span @click="dialogVisible = true">
            <i class="iconfont iconxiugaimima"></i> 修改密码
          </span>
          <span @click="logdialogVisible= true">
            <i class="iconfont icontuichuxitong"></i> 退出
          </span>
        </p>
       
      </div>
    </div>
       <!--头部背景-->
    <div class="fixedTop">
      <div class="topheader">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
      </div>
    </div>
     <!--修改密码对话框-->
        <el-dialog
          title="修改密码"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          width="500px"
        >
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="新密码" prop="new_pass">
              <el-input v-model="ruleForm.new_pass" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="re_pass">
              <el-input v-model="ruleForm.re_pass" placeholder="请输入"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <button @click="editForm('ruleForm')" class="dialogbutton confim">确 定</button>
            <button @click="dialogVisible = false" class="dialogbutton calce">取 消</button>
          </span>
        </el-dialog>
        <!--退出登录对话框-->
        <!--修改密码对话框-->
        <el-dialog
          title="提示"
          :visible.sync="logdialogVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          width="500px"
        >
          <i class="el-icon-warning warningicon"></i>
          <p class="logP">是否退出登录?</p>
          <span slot="footer" class="dialog-footer">
            <button @click="logconfim" class="dialogbutton confim">确 定</button>
            <button @click="logdialogVisible = false" class="dialogbutton calce">取 消</button>
          </span>
        </el-dialog>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState({
      token: state => state.Authorization,
      oldpass: state => state.userData.password
    })
  },
  data() {
    return {
      currentTime: "",
      dialogVisible: false,
      logdialogVisible: false,
      ruleForm: {
        new_pass: "",
        re_pass: ""
      },
      rules: {
        new_pass: [
          { required: true, message: "请输入新密码", trigger: "blur" }
        ],
        re_pass: [{ required: true, message: "请确认新密码", trigger: "blur" }]
      }
    };
  },
  created() {
    setInterval(this.showDate, 0);
    console.log(this.token)
  },
  methods: {
    ...mapMutations(["changePassword", "changeremberpwdchecked", "logout"]),
    //系统日期
    showDate() {
      var d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      let day = d.getDate();
      let hour = d.getHours();
      let minute = d.getMinutes();
      let seconds = d.getSeconds();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = `0${seconds}`;
      }
      this.currentTime =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        seconds;
    },
    //退出登录
    logconfim() {
      localStorage.clear();
      this.logout();
      this.$router.push({
        //核心语句
        path: "/login" //跳转的路径
      });
      this.logdialogVisible = false;
    },

    //修改密码
    editForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var params = {
            token: this.token,
            old_pass: this.oldpass,
            new_pass: this.ruleForm.new_pass,
            re_pass: this.ruleForm.re_pass
          };
          this.$http
            .post(
              `${this.$basePath}?service=App.Accounts.EditAccountPass&api=193`,
              params
            )
            .then(res => {
              if (res.ret == 200) {
                console.log("修改成功", res);

                this.dialogVisible = false;
                localStorage.clear();
                this.changeremberpwdchecked({
                  remberpwdchecked: false
                });
                this.changePassword({
                  AuthorizationPassword: this.newpwd
                });
                this.logout();
                this.$router.push({
                  //核心语句
                  path: "/login" //跳转的路径
                });
              } else {
                this.$message.error(res.msg);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/dialog";
/deep/.el-dialog__header {
  line-height: normal;
  text-align: left;
}
/deep/.el-dialog,
/deep/ .el-pager li {
  background: url(../../../static/image/dialog_top.png) no-repeat;
  background-size: 100%100%;
  // box-shadow: 0px 0px 25px 0px rgba(68, 140, 232, 0.7) inset;
  color: #fff;
}
/deep/ .el-dialog__body{
  height: 100px;
}
.headerContianer {
  width: 100%;
}
.fixedTop {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;

  .topheader {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    .center {
      width: 780px;
      text-align: center;
      background: #ccc;
      background: url(../../../static/image/header_center.png) no-repeat;
      background-size: 100% 100%;
    }
    .left {
      background: url(../../../static/image/header_left.png) no-repeat;
      background-size: 100% 100%;
      flex-grow: 1;
    }
    .right {
      /*flex-grow 属性用于设置或检索弹性盒的扩展比率。*/
      background: url(../../../static/image/header_right.png) no-repeat;
      background-size: 100% 100%;
      flex-grow: 1;
    }
  }
}
.headercon {
  width: 100%;
  position: fixed;
  z-index: 100;
  top: 32px;
}
.commonHeardercontainer {
  padding: 0 10px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 232, 255, 1);
  display: flex;
  justify-content: space-between;
  // line-height: 82px;
  z-index: 999;
  cursor: pointer;
  p {
    margin: 0;
  }
  span {
    cursor: pointer;
    margin-left: 15px;
  }
}
.warningicon {
  color: #f00;
  font-size: 46px;
}
.logP {
  color: #fff;
  font-size: 18px;
margin: 20px;
}
</style>